<template>
  <view class="box">
    <u-navbar
      back-icon-color="#333333"
      :border-bottom="false"
      title-color="#333333"
      title="服务商入驻"
      title-size="32"
      :title-bold="true"
    >
    </u-navbar>
    <!-- 入驻类型 -->
    <view class="type">
      <u-radio-group v-model="value">
        <u-radio
          style="margin-left: 130rpx"
          @change="radioChange"
          active-color="#FBD220"
          v-for="(item, index) in list"
          :key="index"
          :name="item.name"
          :disabled="item.disabled"
        >
          <view class="group" :class="{ active: item.name === value }">
            {{ item.name }}
          </view>
        </u-radio>
      </u-radio-group>
    </view>
    <!-- 公司入驻 -->
    <view v-show="value === '公司入驻'">
      <!-- 入驻信息 -->
      <view class="info">
        <!-- 公司全称 -->
        <view>
          <view>
            <text style="color: #eb5c02">*</text>
            <text style="color: #666666; font-size: 26rpx">公司全称</text>
          </view>
          <view>
            <u-input
              v-model="settlement.fullName"
              placeholder="请输入公司全称"
              placeholderStyle="color: #666666"
            ></u-input>
          </view>
        </view>
        <!-- 公司类型 -->
        <view class="title flex flex-jc-sb" @click="type = true">
          <view>{{ typeValue }}</view>
          <view :class="type === true ? 'xiala' : 'shouqi'"
            ><u-icon
              name="arrow-down-fill"
              size="25rpx"
              color="#999999"
            ></u-icon
          ></view>
        </view>
        <!-- 公司地址 -->
        <view class="title flex flex-ai-c">
          <text>*</text>
          <view style="width: 100%"
            ><u-input
              height="0"
              v-model="settlement.address"
              placeholder="请输入公司地址"
              placeholderStyle="color: #666666"
            ></u-input
          ></view>
        </view>
        <!-- 申请区域 -->
        <view class="title flex flex-jc-sb" @click="address = true">
          <view> <text>*</text>申请区域 </view>
          <view
            >{{ addressList.province }}{{ addressList.city
            }}{{ addressList.area }}</view
          >
          <view :class="address === true ? 'xiala' : 'shouqi'"
            ><u-icon
              name="arrow-down-fill"
              size="25rpx"
              color="#999999"
            ></u-icon
          ></view>
        </view>
        <!-- 联系人 -->
        <view class="title flex flex-ai-c">
          <text>*</text>
          <view style="width: 100%"
            ><u-input
              height="0"
              v-model="settlement.name"
              placeholder="联系人"
              placeholderStyle="color: #666666"
            ></u-input
          ></view>
        </view>
        <!-- 联系电话 -->
        <view class="title flex flex-ai-c">
          <text>*</text>
          <view style="width: 100%">
            <u-input
              maxlength="11"
              height="0"
              type="number"
              v-model="settlement.phone"
              placeholder="联系电话"
              placeholderStyle="color: #666666"
            ></u-input>
          </view>
        </view>

        <!-- 证件 -->
        <view class="flex flex-jc-sa upload">
          <view
            v-for="item in upload"
            :key="item.type"
            @click="onUpload(item.type)"
          >
            <view class="certificates">
              <i-icon
                :icon="item.icon"
                size="43rpx"
                color="#999999"
                v-show="item.src === ''"
              ></i-icon>
              <image
                class="certificates"
                :src="item.src"
                v-show="item.src !== ''"
              ></image>
            </view>
            <view style="text-align: center; margin-top: 20rpx">{{
              item.text
            }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 个人申请 -->
    <view v-show="value === '个人申请'">
      <view class="info">
        <view>
          <view>
            <text style="color: #eb5c02">*</text>
            <text style="color: #666666; font-size: 26rpx">联系人姓名</text>
          </view>
          <view>
            <u-input
              v-model="personal.name"
              placeholder="请输入联系人姓名"
            ></u-input>
          </view>
        </view>
        <!-- 联系电话 -->
        <view class="title flex flex-ai-c">
          <text>*</text>
          <view style="width: 100%">
            <u-input
              maxlength="11"
              height="0"
              v-model="personal.phone"
              placeholder="联系电话"
              placeholderStyle="color: #666666"
            ></u-input>
          </view>
        </view>
        <!-- 公司地址 -->
        <view class="title flex flex-ai-c">
          <text>*</text>
          <view style="width: 100%"
            ><u-input
              height="0"
              v-model="personal.address"
              placeholder="公司地址"
              placeholderStyle="color: #666666"
            ></u-input
          ></view>
        </view>
        <!-- 申请区域 -->
        <view class="title flex flex-jc-sb" @click="address = true">
          <view> <text>*</text>申请区域 </view>
          <view
            >{{ addressList.province }}{{ addressList.city
            }}{{ addressList.area }}</view
          >
          <view :class="address === true ? 'xiala' : 'shouqi'">
            <u-icon name="arrow-down-fill" size="25rpx" color="#999999"></u-icon
          ></view>
        </view>
        <!-- 备注 -->
        <view class="title">
          <view style="color: #999999">备注</view>
          <view
            ><u-input
              type="textarea"
              height="100"
              v-model="personal.remarks"
              placeholder="请输入备注"
              :autoHeight="true"
            ></u-input
          ></view>
        </view>
      </view>
    </view>

    <!-- 政策 -->
    <view class="flex" style="padding: 50rpx 24rpx 24rpx 24rpx">
      <view class="flex flex-ai-c" @click="agree">
        <!-- 未选择 -->
        <i-icon
          v-if="!isAgree"
          icon="iconiconfontxuanzhong"
          type="single"
          size="30rpx"
          color="#e1e1e1"
        ></i-icon>
        <!-- 勾选 -->
        <i-icon
          v-else
          icon="iconiconfontxuanzhong"
          type="single"
          size="30rpx"
          color="#FBBC00"
        ></i-icon>
        我已经阅读并同意
      </view>
      <view
        ><text style="color: #2966cb" @click="model = true"
          >《7迈车服务商入驻协议》</text
        ></view
      >
    </view>

    <!-- 提交 -->
    <view class="footer">
      <view class="footer-msg">
        <view>我们将严格保密您所提交的信息</view>
        <view
          >如有问题请联系客服：<text style="color: #2966cb" @click="phone">{{
            serviceNumber.showNumber
          }}</text></view
        >
      </view>
      <view class="footer-btn" @click="submit">
        <view>提交</view>
      </view>
    </view>

    <!-- 协议 -->

    <!-- 公司类型 -->
    <u-popup v-model="type" mode="bottom">
      <view style="margin-bottom: 50rpx">
        <view
          style="
            font-size: 34rpx;
            text-align: center;
            font-weight: 500;
            border-bottom: 2rpx solid #eeeeee;
            line-height: 100rpx;
            color: #333333;
          "
          >公司类型</view
        >
        <view
          v-for="item in typeList"
          :key="item.type"
          @click="selectType(item)"
          style="line-height: 80rpx; text-align: center; font-size: 30rpx"
        >
          <view :class="{ active2: item.name === typeValue }">{{
            item.name
          }}</view>
        </view>
      </view>
    </u-popup>

    <!-- 服务协议 -->
    <u-modal
      v-model="model"
      title="7迈车服务商入驻协议"
      @confirm="agreement"
      :mask-close-able="true"
      :title-style="{ color: '#000000' }"
      :show-cancel-button="true"
      confirm-color="#FBD220"
    >
      <view class="content">
        <view class="content-title">重要提示：</view>
        <agree></agree>
      </view>
    </u-modal>

    <!-- 选择地址 -->
    <!-- <taddress :title="'地址'" :showdz="address" @confirmdz="applicationArea" @close="close"></taddress> -->
    <u-popup v-model="address" mode="bottom" length="52%" border-radius="30">
      <view class="hgzbox">
        <view class="xsquy"> 地址 </view>
        <view class="cityquxdz">
          <view class="shenfdz"> 省/地区 </view>
          <view class="shif"> 请选择 市 </view>
          <view class="shif"> 请选择 区 </view>
        </view>
        <u-picker
          class="cheliquyu"
          style="margin-top: 94px !important"
          confirm-color="#343434"
          cancel-color="#FFE23E"
          mode="region"
          v-model="address"
          :area-code="['51', '5101', '510104']"
          @confirm="applicationArea"
        ></u-picker>
      </view>
    </u-popup>
    <!-- <u-picker style="margin-top: 94px !important;" mode="region" confirm-color="#FBB000"  v-model="address" @confirm="applicationArea"></u-picker> -->
  </view>
</template>

<script src="./settlement.js"></script>

<style lang="scss" scoped>
@import "./settlement.scss";
</style>
